<script>
export default {
    data: () => ({
        account: 'Abc', // 账号
        password: '123456' // 密码
    }),
    // 侦听器
    watch: {
        account: {
            handler(newData, oldData) {
                console.log('账号的新旧值：')
                console.log(newData)
                console.log(oldData)
                // 侦听器默认情况下，回调函数中访问 Dom 将是更新之前的状态
                console.log(document.getElementById('titleAccount').innerHTML)
            }
        },
        password: {
            flush: 'post', // 更改回调的触发机制（Dom 更新后）
            handler(newData, oldData) {
                console.log('密码的新旧值：')
                console.log(newData)
                console.log(oldData)
                // 回调函数中访问 Dom 将是更新之后的状态
                console.log(document.getElementById('titlePassword').innerHTML)
            }
        }
    }
}
</script>

<template>
    <h3 id="titleAccount">
        账号：<span>{{ account }}</span>
    </h3>
  账号：<input v-model="account" type="text">

    <hr>

    <h3 id="titlePassword">
        密码：<span>{{ password }}</span>
    </h3>
  密码：<input v-model="password" type="text">
</template>